<template>
  <div class="resources-container">
    <div class="page-header">
      <div class="header-left">
        <h1>教学资源</h1>
      </div>
      <div class="header-right">
        <el-upload
          class="upload-button"
          action="/api/resources/upload"
          :show-file-list="false"
          :before-upload="beforeUpload"
          :on-success="handleUploadSuccess"
        >
          <el-button type="primary">
            <el-icon><Upload /></el-icon>上传资源
          </el-button>
        </el-upload>
      </div>
    </div>

    <div class="filter-container">
      <el-form :inline="true" :model="filterForm" class="filter-form">
        <el-form-item label="资源类型">
          <el-select v-model="filterForm.type" placeholder="全部类型" clearable>
            <el-option label="课件" value="ppt"></el-option>
            <el-option label="文档" value="doc"></el-option>
            <el-option label="视频" value="video"></el-option>
            <el-option label="音频" value="audio"></el-option>
            <el-option label="图片" value="image"></el-option>
            <el-option label="其他" value="other"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学科">
          <el-select v-model="filterForm.subject" placeholder="全部学科" clearable>
            <el-option label="语文" value="chinese"></el-option>
            <el-option label="数学" value="math"></el-option>
            <el-option label="英语" value="english"></el-option>
            <el-option label="物理" value="physics"></el-option>
            <el-option label="化学" value="chemistry"></el-option>
            <el-option label="生物" value="biology"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="filterForm.keyword"
            placeholder="搜索资源名称"
            clearable
            @keyup.enter="handleSearch"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="resources-list">
      <el-table :data="resourcesList" style="width: 100%">
        <el-table-column type="selection" width="55" />
        <el-table-column label="资源名称" min-width="200">
          <template #default="{ row }">
            <div class="resource-name">
              <el-icon :size="20" class="resource-icon">
                <component :is="getResourceIcon(row.type)" />
              </el-icon>
              <span>{{ row.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="类型" width="100">
          <template #default="{ row }">
            {{ getResourceType(row.type) }}
          </template>
        </el-table-column>
        <el-table-column prop="size" label="大小" width="100">
          <template #default="{ row }">
            {{ formatFileSize(row.size) }}
          </template>
        </el-table-column>
        <el-table-column prop="uploadTime" label="上传时间" width="180">
          <template #default="{ row }">
            {{ formatDate(row.uploadTime) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button-group>
              <el-button type="primary" link @click="previewResource(row)">
                <el-icon><View /></el-icon>预览
              </el-button>
              <el-button type="primary" link @click="downloadResource(row)">
                <el-icon><Download /></el-icon>下载
              </el-button>
              <el-dropdown>
                <el-button type="primary" link>
                  <el-icon><More /></el-icon>更多
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="shareResource(row)">
                      <el-icon><Share /></el-icon>分享
                    </el-dropdown-item>
                    <el-dropdown-item divided @click="deleteResource(row)">
                      <el-icon><Delete /></el-icon>删除
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>

      <div v-if="!resourcesList.length" class="empty-state">
        <el-empty description="暂无教学资源">
          <el-button type="primary" @click="openUploadDialog">上传资源</el-button>
        </el-empty>
      </div>

      <div class="pagination-container" v-if="resourcesList.length">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Document,
  Picture,
  VideoCamera,
  Headset,
  Files,
  Upload,
  Download,
  View,
  More,
  Share,
  Delete,
  Search,
} from '@element-plus/icons-vue'

// 筛选表单
const filterForm = ref({
  type: '',
  subject: '',
  keyword: '',
})

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)

// 模拟数据
const resourcesList = ref([
  {
    id: '1',
    name: '函数概念导入课件.pptx',
    type: 'ppt',
    size: 2048576, // 2MB
    uploadTime: '2024-03-10T10:30:00',
  },
  {
    id: '2',
    name: '牛顿运动定律教学视频.mp4',
    type: 'video',
    size: 104857600, // 100MB
    uploadTime: '2024-03-09T15:20:00',
  },
  {
    id: '3',
    name: '古诗词赏析教案.docx',
    type: 'doc',
    size: 1048576, // 1MB
    uploadTime: '2024-03-08T09:15:00',
  },
])

// 获取资源图标
const getResourceIcon = (type: string) => {
  const iconMap: Record<string, any> = {
    ppt: Document,
    doc: Document,
    video: VideoCamera,
    audio: Headset,
    image: Picture,
    other: Files,
  }
  return iconMap[type] || Files
}

// 获取资源类型文本
const getResourceType = (type: string) => {
  const typeMap: Record<string, string> = {
    ppt: '课件',
    doc: '文档',
    video: '视频',
    audio: '音频',
    image: '图片',
    other: '其他',
  }
  return typeMap[type] || '未知类型'
}

// 格式化文件大小
const formatFileSize = (bytes: number) => {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

// 格式化日期
const formatDate = (date: string) => {
  return new Date(date).toLocaleString('zh-CN')
}

// 处理上传对话框
const openUploadDialog = () => {
  const uploadBtn = document.querySelector('.upload-button .el-upload__input')
  if (uploadBtn) {
    ;(uploadBtn as HTMLElement).click()
  }
}

// 上传前检查
const beforeUpload = (file: File) => {
  const isLt100M = file.size / 1024 / 1024 < 100
  if (!isLt100M) {
    ElMessage.error('上传文件大小不能超过 100MB!')
    return false
  }
  return true
}

// 上传成功
const handleUploadSuccess = (response: any) => {
  ElMessage.success('上传成功')
  // 这里添加上传成功后的逻辑
}

// 搜索
const handleSearch = () => {
  currentPage.value = 1
  // 这里添加搜索逻辑
  ElMessage.success('搜索成功')
}

// 重置搜索
const resetSearch = () => {
  filterForm.value = {
    type: '',
    subject: '',
    keyword: '',
  }
  handleSearch()
}

// 预览资源
const previewResource = (resource: any) => {
  ElMessage.info('预览功能开发中')
}

// 下载资源
const downloadResource = (resource: any) => {
  ElMessage.success('开始下载')
  // 这里添加下载逻辑
}

// 分享资源
const shareResource = (resource: any) => {
  ElMessage.info('分享功能开发中')
}

// 删除资源
const deleteResource = (resource: any) => {
  ElMessageBox.confirm('确定要删除这个资源吗？', '删除确认', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      resourcesList.value = resourcesList.value.filter((item) => item.id !== resource.id)
      ElMessage.success('删除成功')
    })
    .catch(() => {})
}

// 处理分页
const handleSizeChange = (val: number) => {
  pageSize.value = val
  // 这里添加分页逻辑
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
  // 这里添加分页逻辑
}
</script>

<style scoped>
.resources-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h1 {
  margin: 0;
  font-size: 24px;
  color: #303133;
}

.filter-container {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.resource-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.resource-icon {
  color: #909399;
}

.empty-state {
  padding: 40px 0;
  text-align: center;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>
